/* eslint-disable react-hooks/exhaustive-deps */
import { getInfoByStepType } from '@/services/student';
import type { RadioChangeEvent } from 'antd';
import { Empty } from 'antd';
import { Radio } from 'antd'
import React, { useContext, useEffect } from 'react'
import { useState } from 'react'
import { CourseContext } from '..';
import Animate from './components/AnimateCourse';
import ClassData from './components/ClassData';
import Practice from './components/Practice';
import VideoCourse from './components/VideoCourse';

export default function EntryData() {
  const ctx = useContext(CourseContext);
  const [key, setKey] = useState<string>();
  const [tabs] = useState([
    {
      key: 'a1',
      title: '课堂数据',
      type: [0, 6],
    },
    {
      key: 'a2',
      title: '互动视频课',
      type: [1],
    },
    {
      key: 'a3',
      title: '动画课',
      type: [3],
    },
    {
      key: 'a4',
      title: '练习题',
      type: [4],
    },
  ]);
  const [typeList, setTypeList] = useState<any[]>();
  useEffect(() => {
    (async () => {
      const res = await getInfoByStepType({ id: ctx.courseId });
      setTypeList(res?.result?.typeList?.map((e: any) => e.type));
    })();

  }, [ctx]);
  // console.log(typeList);
  const filterTabs = () => {
    return tabs.filter(e => {
      // eslint-disable-next-line @typescript-eslint/no-for-in-array
      for (const i in e.type) {
        const type = e.type[i];
        if (!typeList?.includes(type)) {
          return false;
        }
        return true;
      }
      return true
    });
  }
  console.log(filterTabs());

  useEffect(() => {
    if (typeList == null) {
      return;
    }
    setKey(filterTabs()?.[0]?.key);
  }, [typeList]);
  const changeStatus = (e: RadioChangeEvent) => {
    setKey(e.target.value);
  }
  const showEntryData = () => {
    if (key == 'a1') {
      return <ClassData />
    } else if (key == 'a2') {
      return <VideoCourse />
    } else if (key == 'a3') {
      return <Animate />
    } else if (key == 'a4') {
      return <Practice />
    } else {
      return;
    }
  }

  return (
    <>
      {
        filterTabs()?.length == 0 ? <Empty description={'还没有条目数据'} image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
          <div style={{ textAlign: 'center' }}>
            {

              <Radio.Group onChange={changeStatus} value={key} buttonStyle="solid">
                {
                  filterTabs().map(e => {
                    return <Radio.Button key={e.key} value={e.key}>{e.title}</Radio.Button>;
                  })
                }
              </Radio.Group>
            }

            <div>
              {
                showEntryData()
              }
            </div>
          </div>
      }
    </>
  )
}
